<template>
	<view class="container">
		<view id="topBar" class="d-flex flex-row justify-content-evenly font-size-28 bg-white order-type-box">
			<view @click="changeOrderType('0')"
				:class="orderType == '0' ? 'selected' : ''"
				class="order-type font-color-gray">
				店内点单
			</view>
			<view @click="changeOrderType('1')"
				:class="orderType == '1' ? 'selected' : ''" class="order-type font-color-gray">
				预定自取
			</view>
			<view @click="changeOrderType('2')"
				:class="orderType == '2' ? 'selected' : ''" class="order-type font-color-gray">
				直接付款
			</view>
		</view>
		
		<!-- 订单列表滚动区域 -->
		<swiper @animationfinish="changeSwiper" :current="orderType" :style="{paddingTop}" class="swiper" >
			<swiper-item class="swiper-item" item-id="in">
				<scroll-view scroll-y enable-flex>
					<component-empty v-if="!data.in.length" descripe="您还未点过单呢,快去看看吧~"></component-empty>
					<template v-else>
						<view v-for="(item,index) in data.in" :key="item.id" class="item d-flex flex-column r-10 p-20 bg-white">
							<component-order-item :order="item"></component-order-item>
						</view>
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item"  item-id="packing">
				<scroll-view scroll-y enable-flex>
					<component-empty v-if="!data.packing.length" descripe="暂无预定自取的订单"></component-empty>
					<template v-else>
						<view v-for="(item,index) in data.packing" :key="item.id" class="item d-flex flex-column r-10 p-20 bg-white">
							<component-order-item order="item"></component-order-item>
						</view>
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item" item-id="direct-pay">
				<scroll-view scroll-y enable-flex>
					<component-empty v-if="!data.direct_pay.length" descripe="您还未光顾过小店呢,快来看看吧~"></component-empty>
					<template v-else>
						<view v-for="(item,index) in data.direct_pay" :key="item.id" class="item d-flex flex-column r-10 p-20 bg-white">
							<component-order-item order="item"></component-order-item>
						</view>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {getOrderList} from '../../api/order.js'
	
	export default {
		name:"order",
		data(){
			return {
				data: {
					in: [],
					packing: [],
					direct_pay: []
				},
				orderType: 0,
				paddingTop: 0,
				swiperHeight: 0,
			}
		},
		onLoad() {
			
			this.init();
		},
		methods:{
			init(){
				// DOM 元素将在初始渲染后分配给 ref
				const query = uni.createSelectorQuery();
				query.select('#topBar').boundingClientRect(data => {
					// swiperHeight.value = 100vw
					this.paddingTop = data.height + 10 + 'px';
				}).exec();
				
				//加载数据
				getOrderList()
				.then(data => {
					this.data = data;
				})
				.catch(res => {
					
				})
			},
			changeOrderType(type){
				this.orderType = type;
			},
			changeSwiper(item){
				this.orderType = item.detail.current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/css/order.scss'
</style>
